<template>
  <div class="home">
    <header-nav hello="hello" :hi="true"></header-nav>
    <div class="banner">
      <swipe :autoplay="3000" indicator-color="white" class="swiper">
        <swipe-item 
          v-for="item in banners.images" 
          :key="item.bannerId"
        >
          <van-img fit="contain" :src="item.pic"></van-img>
        </swipe-item>
      </swipe>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive } from 'vue';
import HeaderNav from '@/components/HeaderNav.vue'
import { Swipe, SwipeItem, Image  } from 'vant'
import { getHomeBanner } from '@/api/home'
export default defineComponent({
  name: 'Home',
  components: {
    HeaderNav,
    Swipe,
    SwipeItem,
    vanImg: Image
  },
  setup() {

    let banners = reactive({
      images: []
    })
    onMounted(async () => {
      const res = await getHomeBanner({type:1})
      banners.images = res.data.banners
    })
    
   
    return {
      banners
    }

  }
});
</script>

<style lang="less" scoped>
 .banner {
   height: 3rem;
   .swiper {
     height: 100%;
     .van-image {
       padding: .16rem;
       .van-image__img {
         width: 100%;
         height: 100%;
         border-radius: 4px;
       }
     }
   }
 }

 /deep/.van-swipe__indicator {
   width: .2rem;
   height: .08rem;
   border-radius: .02rem;
 }
</style>
